<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户管理中心</title>
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <style>


    </style>

</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">贝丁网</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item" panel="change-password"><a href="#">修改密码</a></li>
                <li class="menu-item" panel="change-email"><a href="#">修改邮箱</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        更多 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="/tenant">租房系统</a></li>
                        <li><a href="/landlord">房东入口</a></li>
                        <li class="divider"></li>
                        <li><a class="text-danger" href="#">注销账户</a></li>
                    </ul>

                </li>
            </ul>
        </div>
    </div>
</nav>

<style>

    .navbar {
        z-index: 100;
    }

    .containerT {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 5%;
        background-color: rgba(255, 255, 255, 0.78);
        transform: translate(-50%, -50%);
        padding: 20px;
        max-width: 100%;
    }

    body {
        background-color: #e8e9f5
    }

    form input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: 0;
        border: 1px solid rgba(255, 255, 255, .4);
        background-color: rgba(185, 210, 227, 0.53);
        width: 200px;
        border-radius: 3px;
        padding: 8px 15px;
        margin: 0 auto 10px;
        display: block;
        text-align: center;
        font-size: 15px;
        color: #868782;
        -webkit-transition-duration: .25s;
        transition-duration: .25s;
        font-weight: 300;
    }

    form button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: 0;
        background-color: #9bdef1;
        border: 0;
        padding: 10px 15px;
        color: #333;
        border-radius: 3px;
        width: 200px;
        cursor: pointer;
        font-family: microsoft yahei, Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        -webkit-transition-duration: .25s;
        transition-duration: .25s;
    }

    form button:disabled {

        background-color: gainsboro;

    }

    form input:hover {
        background-color: rgba(182, 231, 255, 0.4)
    }

    form input:focus {
        background-color: rgba(182, 231, 255, 0.4);
        width: 230px;
        color: #333
    }

    .notice {
        font-size: 0.9rem;
        line-height: 2;
        color: #677a8b;
        -moz-appearance: none;
        padding: 8px 15px;
        display: none;
    }


</style>


<script src="//cdn.staticfile.org/jquery/2.1.0/jquery.js"></script>


<script>


    function panel(p) {

        //先隐藏所有的panel
        $('.mypanel').hide();

        //然后把指定的panel显示出来
        $('.' + p).show();

    }


</script>


<style>

    .mypanel {
        display: none;
    }

    .active {
        display: block;
    }

</style>

<div class="containerT">

    <div class="mypanel title active">


            <h3>
                ${username}
            </h3>

        <table class="table">


            <tbody>


            <tr style="margin-top: 10px">

                <td>
                    <svg t="1553060613981" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="2068" xmlns:xlink="http://www.w3.org/1999/xlink"
                         width="20" height="20">
                        <defs>
                            <style type="text/css"></style>
                        </defs>
                        <path
                                d="M908.702808 1023.749181h-746.483778c-38.390594 4.265622-72.515567-46.921837-72.515567-72.515567v-482.015239c0-51.187459 55.453081-85.312432 85.312431-85.312432h42.656216v-127.968648c0-145.031134 153.562377-255.937295 298.593512-255.937295s298.593511 110.906161 298.593511 255.937295v127.968648h42.656216c34.124973 0 85.312432 29.859351 85.312432 85.312432v482.015239c-4.265622 25.59373 4.265622 72.515567-34.124973 72.515567z m-183.421729-767.811886c0-98.109297-115.171783-170.624864-213.281079-170.624863s-213.281079 72.515567-213.281079 170.624863v127.968648h426.562158v-127.968648z m127.968648 213.28108h-682.499454v469.218375h682.499454l12.796865 12.796864-12.796865-482.015239z m-298.593511 243.14043v98.109297c0 25.59373-17.062486 42.656216-42.656216 42.656216s-42.656216-21.328108-42.656216-42.656216v-98.109297c-25.59373-12.796865-42.656216-42.656216-42.656216-72.515567 0-46.921837 38.390594-85.312432 85.312432-85.312431s85.312432 38.390594 85.312432 85.312431c0 29.859351-17.062486 59.718702-42.656216 72.515567z"
                                p-id="2069" fill="#1296db"></path>
                    </svg>
                </td>
                <td>
                    <span style="text-overflow: ellipsis; overflow: hidden;width: 70px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;">
                    密码
                    </span>
                </td>
                <td></td>
                <td>
                    <span style="text-overflow: ellipsis; overflow: hidden;width: 40px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;">
                        <a class="menu-item" panel="change-password">修改</a>
                    </span>
                </td>

            </tr>

            <tr>

                <td>

                    <svg t="1553060045491" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="1212" xmlns:xlink="http://www.w3.org/1999/xlink"
                         width="20"
                         height="20">
                        <defs>
                            <style type="text/css"></style>
                        </defs>
                        <path d="M791.272727 256a69.818182 69.818182 0 0 1 69.818182 69.818182v418.909091a69.818182 69.818182 0 0 1-69.818182 69.818182H232.727273a69.818182 69.818182 0 0 1-69.818182-69.818182V325.818182a69.818182 69.818182 0 0 1 69.818182-69.818182h558.545454m0-69.818182H232.727273a139.636364 139.636364 0 0 0-139.636364 139.636364v418.909091a139.636364 139.636364 0 0 0 139.636364 139.636363h558.545454a139.636364 139.636364 0 0 0 139.636364-139.636363V325.818182a139.636364 139.636364 0 0 0-139.636364-139.636364z"
                              p-id="1213" fill="#1296db"></path>
                        <path d="M791.272727 256a68.421818 68.421818 0 0 1 23.272728 4.189091l-251.81091 232.727273h-1.163636a69.818182 69.818182 0 0 1-98.676364 0h-1.163636L209.454545 260.189091a68.421818 68.421818 0 0 1 23.272728-4.189091h558.545454m0-69.818182H232.727273a139.636364 139.636364 0 0 0-124.276364 76.334546l304.872727 281.6a139.636364 139.636364 0 0 0 197.352728 0l304.872727-281.6A139.636364 139.636364 0 0 0 791.272727 186.181818z"
                              p-id="1214" fill="#1296db"></path>
                    </svg>

                </td>

                <td>
                    <span style="text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;">
                    密保邮箱:
                    </span>
                </td>

                <td>

                    <span style="text-overflow: ellipsis; overflow: hidden;max-width: 100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;">${email}</span>
                </td>

                <td>

                    <span style="text-overflow: ellipsis; overflow: hidden;width: 50px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;position: absolute;float: right">
                    <a class="menu-item" panel="change-email">修改</a>
                    </span>

                </td>
            </tr>

            </tbody>

        </table>

        <script>

            //导航栏逻辑绑定

            $('.menu-item').bind('click', function () {


                //首先移除激活
                $('.menu-item').removeClass('active');

                let the = $(this);

                the.addClass('active');

                let p = $(this).attr('panel');

                panel(p);

            });



        </script>

    </div>

    <div class="mypanel success">
        <h2>修改完成</h2>
    </div>


    <%--修改密码的面板--%>
    <div class="mypanel change-password" style="display: none">

        <form class="form">
            <label class="notice p1">由字母数字组成,5至15位</label>
            <input class="pw p1" type="password" placeholder="原密码" name="oldPassword">
            <label class="notice p2">由字母数字组成,5至15位</label>
            <input class="pw p2" type="password" placeholder="新密码" name="newPassword">
            <button type="button" class="sb" disabled style="margin-top: 25px;color: #7e7e7e;
    text-align: center;">修改
            </button>

        </form>

    </div>


    <%--密码校验逻辑--%>

    <script>
        let passwordRegex = /^[a-zA-Z0-9]{5,15}$/;


        let flag1 = false;
        let flag2 = false;

        $('.change-password .pw').bind('input', function (event) {
            if (event.target.value !== "" && passwordRegex.test(event.target.value)) {

                if ($(this).hasClass('p1')) {
                    $('.change-password .notice.p1').hide();
                    flag1 = true;
                } else {
                    $('.change-password .notice.p2').hide();
                    flag2 = true;
                }

                //当两个都为真是按钮可点击
                if (flag1 && flag2) {
                    $('.change-password .sb').attr('disabled', false);
                }

            } else {

                if ($(this).hasClass('p1')) {
                    flag1 = false;
                    $('.change-password .notice.p1').show();
                } else {
                    flag2 = false;
                    $('.change-password .notice.p2').show();
                }

                $('.change-password .sb').attr('disabled', true);


            }

        });


        //当点击修改密码提交按钮
        $('.change-password .sb').click(function () {

            //首先序列化表单
            let s = $('.change-password form').serialize();

            //使用post提交数据
            $.post('/ua/user/change-pw?' + s, function () {
                panel('success');
            }).error(function (err) {

                $('.pw.p1').before('            <label style="display: block" class="notice p1 add">' + err.responseText + '</label>');

                setTimeout(function () {
                    $('.notice.p1.add').remove();
                }, 5000);

            });

        });


    </script>


    <div class="mypanel change-email" style="display: none">

        <form class="form">
            <label class="notice">请输入正确格式的邮箱地址</label>
            <input class="em" type="text" placeholder="新的邮件地址" name="newEmail">

            <div class="code-box" style="width: max-content;display: none;text-align: center">
                <div style="padding: 0px 15px;width: -moz-max-content">
                    <div style="width: 200px;display: inline">
                        <input class="code" style="display: inline-block;width: 150px" type="text" placeholder="验证码"
                               id="entry_code"
                               name="code">
                        <button class="get-code" style="display: inline-block;    width: 50px;
                              outline: 0;
                            background-color: rgb(255, 255, 255);
                            border-radius: 3px;
                            -webkit-appearance: none;
                            -moz-appearance: none;
                            border: 1px solid rgba(255, 255, 255, .4);
                            margin: 0 auto 10px;
                            font-size: 15px;
                            color: #868686;
                            -webkit-transition-duration: .25s;
                            transition-duration: .25s;
                            font-weight: 300;
                            padding-left: 1px;
                            padding-right: 1px;
                            white-space: nowrap;" type="button">
                            获取
                        </button>
                    </div>
                </div>
            </div>

            <button type="button" class="sb" disabled style="margin-top: 25px;color: #7e7e7e;
    text-align: center;">修改
            </button>

        </form>

    </div>

    <script>

        let emailRegex = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

        let flag3 = false;

        let flag4 = false;

        $('.change-email .em').bind('input', function (event) {

            if (!emailRegex.test(event.target.value)) {

                if (event.target.value === '') {
                    $('.change-email .notice').hide();
                } else {
                    $('.change-email .notice').show();
                }


                $('.change-email .sb').attr('disabled', true);
                $('.change-email .code-box').hide();
                flag3 = false;
            } else {
                $('.change-email .notice').hide();
                $('.change-email .code-box').show();
                flag3 = true;
                if (flag3 && flag4) {
                    $('.change-email .sb').attr('disabled', false);
                }
            }

        });

        $('.change-email .code').bind('input', function (e) {

            //如果验证码输入长度为6位
            if (e.target.value.length === 6) {
                flag4 = true;
                if (flag3 && flag4) {
                    $('.change-email .sb').attr('disabled', false);
                }
            } else {
                flag4 = false;
                $('.change-email .sb').attr('disabled', true);
            }

        });


        //点击获取验证码按钮
        $('.change-email .get-code').click(function () {

            //按钮不可用
            let send = $(this);
            send.attr("disabled", true);

            //当请求成功的时候才开始倒计时
            $.post("/ua/user/sendCode", {email: $('.change-email .em').val()}, function (data) {

                //首先显示一条提示

                $('.code-box').before('<label class="notice get-code-info" style="display: block;">验证码已发送</label>');

                let sec = 60;
                $(this).text(sec + "s");

                let timer = setInterval(function () {
                    sec--;
                    send.text(sec + "s");

                    if (sec === 50) {
                        $(".get-code-info").remove();
                    }

                    if (sec === 0) {
                        clearTimeout(timer);
                        send.text("获取");

                        //倒计时结束,胆牛恢复可用
                        send.attr("disabled", false);
                    }
                }, 1000);


            });

        });


        $('.change-email .sb').click(function () {

            //序列化数据
            let s = $('.change-email form').serialize();
            $.post('/ua/user/change-email?' + s, function () {
                panel('success');
            }).error(function (err) {

                $('.em').before('            <label style="display: block" class="notice em add">' + err.responseText + '</label>');

                setTimeout(function () {
                    $('.notice.em.add').remove();
                }, 5000);


            });


        });


    </script>

</div>

<script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


</body>

</html>